<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
    name: {
        type: String,
        defalut: '',
    },
    size: {
        type: String,
        defalut: '100%',
    },
})
const custStyle = ref({
    width: props.size,
    height: props.size,
})
</script>

<template>
    <!--<span class="iconfont" v-bind:style="{width: size, height: size}">-->
    <span class="iconfont" v-bind:style="custStyle">
        <svg class="icon" aria-hidden="true" v-bind:style="custStyle">
            <use :xlink:href="`#${name}`"></use>
        </svg>
    </span>
</template>

<style lang="scss" scoped>
.iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    .icon {
        width: 24px;
        height: 24px;
        fill: currentColor;
        overflow: hidden;
    }
}
</style>
